<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<text class="header-title">教务平台</text>
			<view class="user-avatar" @click="opentx">
				<view class="bell-container">
					🔔
					<view class="badge" v-if="unreadCount > 0">{{unreadCount}}</view>
				</view>
			</view>
		</view>

		<!-- 主要内容 -->
		<view class="main-content">


			<!-- 快捷入口卡片 -->
			<view class="card" :style="{animationDelay: '0.2s'}">
				<view class="card-title">
					<view class="title-line"></view>
					<text>快捷入口</text>
				</view>
				<view class="grid-container">
					<view class="quick-action" @click="openxcap">
						<view class="icon">📅</view>
						<text>行程安排</text>
					</view>
					<!-- <view class="quick-action" @click="openqddk">
						<view class="icon">✅</view>
						<text>签到打卡</text>
					</view> -->

					<view class="quick-action" @click="opensjkb">
						<view class="icon">📊</view>
						<text>数据看板</text>
					</view>
					<view class="quick-action" @click="openpdzx">
						<view class="icon">📚</view>
						<text>派单中心</text>
					</view>
					<view class="quick-action" @click="openxxzx">
						<view class="icon">📚</view>
						<text>学习中心</text>
					</view>
					<view class="quick-action" @click="opentx">
						<view class="badge2" v-if="unreadCount > 0">{{unreadCount}}</view>
						<view class="icon">⏰</view>
						<text>提醒</text>
					</view>
				</view>
			</view>
			<!-- 待办事项卡片 -->
			<view class="card" :style="{animationDelay: '0.1s'}">
				<view class="card-title">
					<view class="title-line"></view>
					<text>待办事项</text>
				</view>
				<view class="task-list" v-for="(item,index) in TaskList">
					<view class="task-item" v-if="item.status == '未开始' " @click=navigateToSignIn(item)>
						<view class="task-icon urgent">!</view>
						<view class="task-content">
							<view class="task-title">{{item.content}}</view>
							<view class="task-time">剩余{{item.remaining_days}}天</view>
						</view>
					</view>
					<view class="task-item" v-if="item.isComplete == '已完成'" @click=navigateToSignIn(item)>
						<view class="task-icon completed">✓</view>
						<view class="task-content">
							<view class="task-title">{{item.content}} <text class="badge-done">
									已完成
								</text></view>

						</view>
					</view>
					<view class="task-item" v-if="item.isComplete == '进行中' " @click=navigateToSignIn(item)>
						<view class="task-icon normal">⏰</view>
						<view class="task-content">
							<view class="task-title">{{item.content}}</view>
							<view class="task-time">剩余{{item.remaining_days}}天</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 项目派单卡片 -->
			<view class="card" :style="{animationDelay: '0.3s'}">
				<view class="card-title">
					<view class="title-line"></view>
					<text>项目派单</text>
				</view>
				<view class="task-list" v-for="(item,index) in projectDispatchList">
					<view class="task-item" @click="acceptOrder(item)">
						<view class="task-icon completed">✓</view>
						<view class="task-content">
							<view class="task-title">{{item.title}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		projectDispatchList,
		getChildTaskNoEnd,
		getTaskList
	} from "../../utils/getDate.js"

	export default {
		data() {
			return {
				userinfo: null,
				teacher: null,
				projectDispatchList: [],
				TaskList: [],
				unreadCount: 0 // 添加未读消息计数
			}
		},
		onShow() {
			this.onprojectDispatchList()
			this.ongetTaskList()
			this.ongetChildTaskNoEnd()
		},


		methods: {
			onprojectDispatchList() {
				let data = {
					teacherId: uni.getStorageSync("teacher").id
				}
				projectDispatchList(data).then(res => {
					this.projectDispatchList = res.data
				})
			},
			acceptOrder(item) {
				const order = item
				uni.showModal({
					title: '接取订单',
					content: `前往接取 "${order.title}"`,
					success: (res) => {
						if (res.confirm) {
							// 跳转到确认订单页面，并传递订单信息
							uni.navigateTo({
								url: `/pages/TC/confirmOrder?order=${encodeURIComponent(JSON.stringify(order))}`
							});
						}
					},
				});
			},
			ongetChildTaskNoEnd() {
				let data = {
					teacherId: uni.getStorageSync("teacher").id
				}
				getChildTaskNoEnd(data).then(res => {

					this.unreadCount = res.data.length; // 获取未读消息数量
				})

			},
			ongetTaskList() {
				const data = {
					teacherId: uni.getStorageSync("teacher").id
				}

				getTaskList(data).then(res => {
					if (res.state === 'ok') {
						this.TaskList = res.children
					}
				})
			},
			openwd() {
				uni.navigateTo({
					url: '/pages/teacher/my'
				});
			},
			openxcap() {
				uni.navigateTo({
					url: '/pages/TC/Itinerary'
				});
			},
			openqddk() {
				uni.navigateTo({
					url: '/pages/TC/TCsignIn'
				});
			},

			opensjkb() {
				// uni.navigateTo({
				// 	url: '/pages/TC/dataBoard'
				// });
				uni.showToast({
					title: "暂未开放",
					icon: "none"
				})

			},
			openpdzx() {
				uni.navigateTo({
					url: '/pages/TC/Dispatch'
				});

			},
			openxxzx() {
				uni.navigateTo({
					url: '/pages/TC/studyC'
				});
			},
			openjd() {
				uni.navigateTo({
					url: '/pages/teacher/accept-order'
				});
			},
			openrwqd() {
				uni.navigateTo({
					url: '/pages/teacher/task-list'
				});
			},
			opentx() {
				uni.navigateTo({
					url: '/pages/TC/tixing'
				});
			},
			navigateToSignIn(item) {
				uni.navigateTo({
					url: `/pages/TC/TCsignIn?taskId=${item.taskId}`
				});
			},
		}
	}
</script>

<style scoped>
	.bell-container {
		position: relative;
		display: inline-block;
	}

	.badge {
		position: absolute;
		top: -8px;
		right: -8px;
		background-color: #ef233c;
		color: white;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
	}

	.badge2 {
		background-color: #ef233c;
		color: white;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
		margin-left: 200rpx;
	}

	.container {
		font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		color: #212529;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
		/* 为底部导航留出空间 */
	}

	.header {
		position: fixed;
		top: 0;
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: 16px;
		z-index: 100;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.header-title {
		font-size: 1.5rem;
		font-weight: 600;
		color: #4361ee;
		letter-spacing: -0.5px;
	}

	.header-icons {
		display: flex;
		gap: 10px;
	}

	.user-avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: linear-gradient(45deg, #4361ee, #3a0ca3);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: bold;
	}

	.main-content {
		margin: 0px 0 100px;
		padding: 16px;
		padding-top: 80px;

	}

	.card {
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		opacity: 0;
		transform: translateY(20px);
		animation: fadeInUp 0.6s forwards;
	}

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card-title {
		font-size: 1.2rem;
		margin-bottom: 12px;
		color: #4361ee;
		display: flex;
		align-items: center;
	}

	.title-line {
		width: 4px;
		height: 16px;
		background: #4361ee;
		margin-right: 8px;
		border-radius: 2px;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 16px;
	}

	.quick-action {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 12px;
		padding: 16px;
		text-align: center;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.quick-action text {
		font-size: 0.9rem;
		font-weight: 500;
		color: #212529;
	}

	.quick-action .icon {
		width: 40px;
		height: 40px;
		margin: 0 auto 8px;
		background: linear-gradient(45deg, #4361ee, #3a0ca3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 20px;
	}

	.task-list {
		list-style: none;
	}

	.task-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.task-item:last-child {
		border-bottom: none;
	}

	.task-icon {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.task-icon.urgent {
		background: #ef233c;
		color: white;
	}

	.task-icon.completed {
		background: #4cc9f0;
		color: white;
	}

	.task-icon.normal {
		background: #f8961e;
		color: white;
	}

	.task-content {
		flex: 1;
	}

	.task-title {
		font-weight: 500;
		margin-bottom: 2px;
	}

	.task-time {
		font-size: 0.8rem;
		color: rgba(0, 0, 0, 0.6);
	}





	/* 响应式设计 */
	@media (max-width: 768px) {
		.grid-container {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 500px) {
		.header-title {
			font-size: 1.2rem;
		}

		.quick-action .icon {
			width: 32px;
			height: 32px;
			font-size: 16px;
		}

		.quick-action text {
			font-size: 0.8rem;
		}
	}

	.badge-done {
		color: #10b981;
		margin-left: 10rpx;
		font-size: 20rpx;
	}
</style>